<template>
	<view class="detail">
		<!-- 商品基本信息 -->
		<view class="detail-baseinfo">
			<view class="detail-baseinfo_img">
				<image src="../../static/banner4.webp" mode=""></image>
				<text @click="back" class="iconfont icon-zhibozhong detail-baseinfo_img-back"></text>
			</view>
			<view class="detail-baseinfo-price">
				<text>
					<text>￥</text>
					<text class="detail-baseinfo-price_1">20</text>
					<text>.50/份</text>
					<text class="detail-baseinfo-price_hot">正在热销中</text>
				</text>
			</view>
			<view class="detail-baseinfo-name">
				<view class="detail-baseinfo-name_text">
					<text style="font-size: 18px;">红宝崔有套</text><br />
					<text>脆爽鲜嫩 水润多汁</text>
				</view>
				<view class="detail-baseinfo-name_share">
					<text>分享</text>
				</view>
			</view>
			<view class="detail-baseinfo-address">
				<view class="detail-baseinfo-address_name">
					服务门店：北京万泉路点
				</view>
				<view class="detail-baseinfo-address_arrowRight">
					<text class="iconfont icon-arrow-right"></text>
				</view>
				<view class="detail-baseinfo-address_list">
					<view class="detail-baseinfo-address_list-item">
						<text class="iconfont icon-arrow-down"></text>
						<text>到货自提</text>
					</view>
					<view class="detail-baseinfo-address_list-item">
						<text class="iconfont icon-arrow-down"></text>
						<text>配送到家</text>
					</view>
					<view class="detail-baseinfo-address_list-item">
						<text class="iconfont icon-arrow-down"></text>
						<text>自提点/自提柜</text>
					</view>

				</view>
			</view>
		</view>
		<!-- 满减 -->
		<view class="detail-manjian">
			<text class="detail-manjian_left">满减</text>
			<text>满29元减3元，满39元减4元</text>
			<text class="iconfont icon-arrow-right detail-manjian_right"></text>
		</view>
		<!-- 规格数量地址等更详细的信息 -->
		<view class="detail-detail">
			<view class="detail-detail-item">
				<text class="detail-detail-item_key">规格</text>
				<text class="detail-detail-item_value">720-800g/份</text>
			</view>
			<view class="detail-detail-item">
				<text class="detail-detail-item_key">数量</text>
				<text class="detail-detail-item_value">720-800g/份</text>
			</view>
			<view class="detail-detail-item">
				<text class="detail-detail-item_key">送至</text>
				<text class="detail-detail-item_value">北京市 北京市 海淀区</text>
				<text class="iconfont icon-arrow-right right"> </text>
			</view>
			<view class="detail-detail-more">
				<text class="detail-detail-more_left">
					支持用券</text>
				<text class="detail-detail-more_center">支持7填无理由退货</text>
				<text class="iconfont icon-arrow-right right"></text>
			</view>
		</view>
		<!-- 商品详情，常见问题 -->
		<view class="detail-tab">
			<view class="detail-tab-tab">
				<view class="detail-tab-tab_tabpane" @click="activeIndex=1">
					<text>商品详情</text>
					<text v-if="activeIndex===1" class="detail-tab-tab_tabpane-line"></text>
				</view>
				<view class="detail-tab-tab_tabpane" @click="activeIndex=2">
					<text>常见问题</text>
					<text v-if="activeIndex===2" class="detail-tab-tab_tabpane-line"></text>
				</view>
			</view>
			<!-- 商品详情 -->
			<view class="detail-tab-detail" v-if="activeIndex===1">
				<view class="detail-tab-detail_item">
					<text class="detail-tab-detail_item-key">产地</text>
					<text class="detail-tab-detail_item-value">平谷</text>
				</view>
				<view class="detail-tab-detail_item">
					<text class="detail-tab-detail_item-key">规格</text>
					<text class="detail-tab-detail_item-value">720-800g/份</text>
				</view>
				<view class="detail-tab-detail_item">
					<text class="detail-tab-detail_item-key">净重</text>
					<text class="detail-tab-detail_item-value">800</text>
				</view>
			</view>
			<!-- 常见问题 -->
			<view class="detail-tab-qustion" v-else='activeIndex===2'>
				<view class="detail-tab-qustion_item">
					<view class="detail-tab-qustion_item-ask">
						<text class="detail-tab-qustion_item-left bgcolor-wen">问</text>
						<text class="detail-tab-qustion_item-ask-qus">下单后，如何付款？</text>
					</view>
					<view class="detail-tab-qustion_item-answer">
						<text class="detail-tab-qustion_item-left bgcolor-da">问</text>
						<text class="detail-tab-qustion_item-answer-ans">目前支持钱包余额，微信支付等支付方式，请您在付款是按照步骤进行操作</text>
					</view>
				</view>
				<view class="detail-tab-qustion_item">
					<view class="detail-tab-qustion_item-ask">
						<text class="detail-tab-qustion_item-left bgcolor-wen">问</text>
						<text class="detail-tab-qustion_item-ask-qus">下单后，如何付款？</text>
					</view>
					<view class="detail-tab-qustion_item-answer">
						<text class="detail-tab-qustion_item-left bgcolor-da">问</text>
						<text class="detail-tab-qustion_item-answer-ans">目前支持钱包余额，微信支付等支付方式，请您在付款是按照步骤进行操作</text>
					</view>
				</view>
				<view class="detail-tab-qustion_item">
					<view class="detail-tab-qustion_item-ask">
						<text class="detail-tab-qustion_item-left bgcolor-wen">问</text>
						<text class="detail-tab-qustion_item-ask-qus">下单后，如何付款？</text>
					</view>
					<view class="detail-tab-qustion_item-answer">
						<text class="detail-tab-qustion_item-left bgcolor-da">问</text>
						<text class="detail-tab-qustion_item-answer-ans">目前支持钱包余额，微信支付等支付方式，请您在付款是按照步骤进行操作</text>
					</view>
				</view>
				<view class="detail-tab-qustion_item">
					<view class="detail-tab-qustion_item-ask">
						<text class="detail-tab-qustion_item-left bgcolor-wen">问</text>
						<text class="detail-tab-qustion_item-ask-qus">下单后，如何付款？</text>
					</view>
					<view class="detail-tab-qustion_item-answer">
						<text class="detail-tab-qustion_item-left bgcolor-da">问</text>
						<text class="detail-tab-qustion_item-answer-ans">目前支持钱包余额，微信支付等支付方式，请您在付款是按照步骤进行操作</text>
					</view>
				</view>
			</view>

		</view>
	</view>
</template>

<script>
	export default {
		data() {
			return {
				activeIndex: 2
			}
		},
		methods: {
			back() {
				uni.navigateBack()
			}
		}
	}
</script>

<style lang="scss">
	.right {
		float: right;
	}

	/* baseinfo部分 */
	.detail-baseinfo {
		width: 100%;
		background-color: #fff;
		border-radius: 5px;
		padding-bottom: 10px;

		.detail-baseinfo_img {
			width: 100%;
			height: 300px;
			position: relative;

			uni-image {
				width: 100%;
				height: 100%;
			}

			.detail-baseinfo_img-back {
				width: 36px;
				height: 36px;
				line-height: 36px;
				text-align: center;
				position: absolute;
				left: 5px;
				top: 10px;
				font-size: 20px;
				background: #fff;
				opacity: .7;
				border-radius: 50%;
			}
		}

		.detail-baseinfo-price {
			margin-top: 10px;
			color: red;
			padding: 0 10px;
			height: 40px;

			.detail-baseinfo-price_1 {
				font-size: 20px;
			}

			.detail-baseinfo-price_hot {
				font-size: 14px;
				margin-left: 10px;
				background: pink;
				padding: 0 10px;
				border-radius: 10px;
			}
		}

		.detail-baseinfo-name {
			padding-left: 10px;
			display: flex;
			justify-content: space-between;
			align-items: center;
			margin-bottom: 10px;

			.detail-baseinfo-name_text {
				line-height: 27px;
				font-size: 14px;
			}

			.detail-baseinfo-name_share {
				color: red;
				width: 50px;
				background: pink;
				text-align: center;
				border-radius: 10px 0px 0 10px;
				font-size: 14px;
			}
		}

		.detail-baseinfo-address {
			width: 90%;
			margin: 0 auto;
			background: #ccc;
			border-radius: 10px;
			padding: 5px 10px;
			position: relative;

			.detail-baseinfo-address_arrowRight {
				position: absolute;
				right: 10px;
				top: 10px;
			}

			.detail-baseinfo-address_list {
				height: 40px;

				.detail-baseinfo-address_list-item {
					float: left;
					height: 40px;
					line-height: 40px;
					font-size: 14px;
					padding-right: 20px;
				}
			}

		}

	}

	.detail-manjian {
		margin: 10px 0;
		width: 100%;
		height: 40px;
		background: #fff;
		line-height: 40px;
		padding: 0 15px;
		box-sizing: border-box;
		border-radius: 10px;

		.detail-manjian_left {
			width: 40px;
			height: 20px;
			background: red;
			border-radius: 10px;
			padding: 0px 6px;
			font-size: 12px;
			color: #fff;
			margin-right: 15px;
		}

		.detail-manjian_right {
			float: right;
		}
	}

	.detail-detail {
		background: #fff;
		border-radius: 10px;
		padding: 15px 15px 0 15px;
		box-sizing: border-box;

		.detail-detail-item {
			height: 32px;

			.detail-detail-item_key {
				color: #ccc;
				padding-right: 15px;
				height: 30px;
			}
		}

		.detail-detail-more {
			height: 36px;
			line-height: 36px;
			font-size: 12px;
			border-top: 1px solid #ccc;
			color: #767373;

			.detail-detail-more_left {
				padding-right: 10px;
				border-right: 1px solid #ccc;
			}

			.detail-detail-more_center {
				padding-left: 10px;
			}
		}
	}

	.detail-tab {
		width: 100%;
		background: #fff;
		border-radius: 10px;
		margin-top: 10px;
		padding: 0 15px;
		box-sizing: border-box;
		padding-bottom: 15px;

		.detail-tab-tab {
			height: 40px;
			line-height: 40px;
			margin-bottom: 10px;

			.detail-tab-tab_tabpane {
				position: relative;
				margin-right: 15px;
				float: left;

				.detail-tab-tab_tabpane-line {
					width: 25px;
					height: 2px;
					background: red;
					margin: 0 auto;
					position: absolute;
					left: 0;
					right: 0;
					bottom: 0;
				}
			}
		}

		.detail-tab-detail {
			width: 100%;
			box-sizing: border-box;
			margin: 0 auto;
			border: 1px solid #ccc;
			font-size: 14px;

			.detail-tab-detail_item {
				height: 32px;
				line-height: 32px;

				.detail-tab-detail_item-key {
					width: 20%;
					display: inline-block;
					padding-left: 10px;
					border: 1px solid #ccc;
					box-sizing: border-box;
				}

				.detail-tab-detail_item-value {
					width: 80%;
					display: inline-block;
					border: 1px solid #ccc;
					box-sizing: border-box;
					padding-left: 10px;
				}
			}
		}

		.detail-tab-qustion {
			background-color: #fff;

			.detail-tab-qustion_item {
				background-color: pink;
				padding: 15px;
				border-radius: 10px;
				margin-bottom: 10px;

				.detail-tab-qustion_item-ask {
					height: 30px;
				}

				.detail-tab-qustion_item-answer-ans {
					color: #6f6161;
				}

				.detail-tab-qustion_item-left {
					color: #fff;
					font-size: 13px;
					margin-right: 10px;
					border-radius: 6px 0;
					padding: 0 2px;
				}

				.bgcolor-wen {
					background: red;
				}

				.bgcolor-da {
					background: orange;
				}
			}

			.detail-tab-qustion_item:nth-child(2n) {
				background-color: #e7e7e2;
			}

		}
	}
</style>
